<template>
  <div class="content-box">
    <div class="item" v-for="(section, idx) in runData" :key="idx">
      <span class="icon"><img :src="section.icon"></img></span>
      <div v-for="(row, rowIdx) in section" :key="rowIdx" class="row">
        <span v-for="(item, itemIndex) in row.split([':'])" :key="itemIndex">
          {{item}} {{itemIndex===0?'：':''}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iconList: ['电池', '负载', '光伏电厂', '充放电', '充电', '更多'],
      runData: []
    }
  },
  methods: {
    // 切换Tab
    switchTab(index) {
      this.currentTab = index
    },
    getData() {
      const data = [
        ['电池电压: 24.7V', '充电电流: 0mA', '电池剩余: 93%', '电池状态: 正常'],
        ['负载电压: 24.7V', '负载电流: 804mA', '负载功率: 19W', '负载状态: 正常放电'],
        ['光板电压: 25.3V', '光板状态: 超压保护', '市电电压: 0V', '市电状态: 不工作'],
        ['今天放电: 241Wh', '昨日放电: 497Wh', '放电累计: 26825Wh', '外部温度: 无'],
        ['今天充电: 804Wh', '昨日充电: 339Wh', '充电累计: 26415Wh', '内部温度: 34°C'],
        ['硬件型号: 1224-SDH2030', '软件版本: 24081', '运行天数: 68天', '欠压次数: 0次']
      ]

      data.forEach((item, index) => {
        item.icon = new URL(`../../../assets/image/lvneng/runData/${this.iconList[index]}.png`, import.meta.url).href
      })
      this.runData = data
    }
  },
  mounted() {
    this.getData()
  }
};
</script>

<style scoped lang="less">
.content-box {
  height: 100%;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.item {
  margin: 10px 0;
  padding: 18px;
  background: url(../../../assets/image/lvneng/runData/kuang.png) 0px 0px no-repeat;
  background-size: 100% 100%;
  margin-top: 66px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  .icon {
    position: absolute;
    transform: -50%;
    left: calc(50% - 44px);
    top: -60px;
    width: 88px;
    height: 88px;
    background: url(../../../assets/image/lvneng/icon_bg.png) 0px 0px no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .row {
    display: flex;
    justify-content: space-between;
    font-size: 110%;
    line-height: 1.8;
  }
}
</style>
